<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: solid;
        background: rgb(215, 220, 207);
        width: 200px;
        height: 200px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <script>
      const box1 = document.getElementById("box1");
      const box2 = document.getElementById("box2");

      box1.onmouseover = function (e) {
        console.log(e.target, e.relatedTarget);
        console.log("box1 onmouserover 移入");
      };

      //   box1.onmouseout = function (e) {
      //     console.log(e.target, e.relatedTarget);
      //     console.log("box1 onmouseout 移出");
      //   };
    </script>
  </body>
</html>
